<template>
  <div>
    <!-- 顶部 -->
    <van-nav-bar
      class="headers"
      :title="section"
      @click-left="onClickLeft"
      @click-right="onClickRight"
      fixed
      z-index="6"
    >
      <template #left>
        <van-icon name="user-circle-o" size="22px" />
      </template>
      <template #right>
        <van-icon name="bars" size="22px" />
      </template>
    </van-nav-bar>
    <van-popup v-model="sectionpopup_show" position="top" z-index="3">
      <div
        v-for="(a,index) in $store.state.data.section"
        :key="index"
        @click="toOtherSection(a)"
      >{{a.name}}</div>
    </van-popup>
    <div class="page-body">
      <section-card :name="section"></section-card>
      <!-- 下拉刷新 -->
      <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
        <topic-list section="all" usertype="all" topictype="all"></topic-list>
      </van-pull-refresh>
    </div>
    <!-- 底部导航栏 -->
    <my-footer></my-footer>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import topic from "../Base/List/topic";
import footer from "@/components/Base/footer";
import sectionCard from "@/components/Base/Card/section";
export default {
  inject:['reload'],
  data() {
    return {
      isLoading: false,
      sectionpopup_show: false,
    };
  },
  methods: {
    ...mapMutations(["open_leftpopup", "close_leftpopup"]),
    onClickLeft() {
      this.open_leftpopup();
    },
    onClickRight() {
      this.sectionpopup_show = true;
    },
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
      }, 1000);
    },
    toOtherSection(section) {
      this.sectionpopup_show = false;
      this.$router.push({ path: "/section", query: { section: section.name } });
      // this.reload();
    },
  },
  computed: {
    section() {
      if (this.$route.query.section) {
        return this.$route.query.section;
      } else {
        return "社区";
      }
    },
  },
  components: {
    "my-footer": footer,
    "topic-list": topic,
    "section-card": sectionCard,
  },
};
</script>

<style scoped>
.van-popup {
  margin-top: 46px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
.van-popup div {
  padding: 5px;
}
</style>